import React from 'react'
import {Select , Form} from 'antd'
import {BaseGroup} from "./BaseGroup"


export class SelectGroup extends BaseGroup {
  static defaultProps = {
    xs: "12",
    lmd: "2",
    md: "9",
    qmd: "1",
    answer: "Default Answer",
  };

  constructor(props) {
    super(props)

    this.getOptions = this.getOptions.bind(this)
  }

  handleChange(e) {

  }

  render() {
    const {formItemLayout, answer, value} = this.props
    const FormItem = Form.Item
    const tips = answer

    return (
      <FormItem label={this.getLabel()} {...formItemLayout} >
        <Select  name="selectMapper" id={this.getId()}
               onChange={this.handleChange}
                 placeholder={tips}
        >
          {
            this.getOptions()
          }
        </Select >
      </FormItem>
    )
  }


  getOptions() {
    const {options} = this.props
    if (!options || options.size === 0) {
      return
    } else {
      return (
        options.map(function (opt) {
          return <option value={opt.key}>{opt.name}</option>
        })
      )
    }
  }
}
